<template>
  <div class="detail-popup-overlay" @click="$emit('close')">
    <div class="detail-popup" @click.stop>
      <div class="popup-header">
        <div class="header-left">
          <h3 class="poi-name">{{ poi.name }}</h3>
          <div class="poi-type">{{ getTypeText(poi.type) }}</div>
        </div>
        <button class="close-btn" @click="$emit('close')">
          <svg viewBox="0 0 24 24">
            <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" fill="currentColor"/>
          </svg>
        </button>
      </div>

      <div class="popup-content">
        <!-- 景点详情 -->
        <template v-if="poi.type === 'scenic'">
          <div class="info-section">
            <h4>实时数据</h4>
            <div class="data-grid">
              <div class="data-item">
                <span class="label">今日累计游客</span>
                <span class="value">{{ poi.todayVisitors }}人</span>
              </div>
              <div class="data-item">
                <span class="label">当前在场人数</span>
                <span class="value">{{ poi.currentVisitors }}人</span>
              </div>
            </div>
          </div>
          
          <div class="info-section">
            <h4>景点介绍</h4>
            <p class="description">{{ poi.description }}</p>
          </div>
          
          <div class="info-section">
            <h4>设施服务</h4>
            <div class="facilities">
              <span v-for="facility in poi.facilities" :key="facility" class="facility-tag">
                {{ facility }}
              </span>
            </div>
          </div>
        </template>

        <!-- 监控详情 -->
        <template v-if="poi.type === 'monitor'">
          <div class="info-section">
            <h4>设备信息</h4>
            <div class="data-grid">
              <div class="data-item">
                <span class="label">设备类型</span>
                <span class="value">{{ poi.cameraType }}</span>
              </div>
              <div class="data-item">
                <span class="label">覆盖范围</span>
                <span class="value">{{ poi.coverage }}</span>
              </div>
              <div class="data-item">
                <span class="label">录制状态</span>
                <span class="value">{{ poi.recordStatus }}</span>
              </div>
            </div>
          </div>
          
          <div class="info-section">
            <h4>视频监控</h4>
            <div class="video-placeholder">
              <div class="video-icon">
                <svg viewBox="0 0 24 24">
                  <path d="M8,5.14V19.14L19,12.14L8,5.14Z" fill="currentColor"/>
                </svg>
              </div>
              <p>点击播放实时监控视频</p>
              <button class="play-btn">播放监控</button>
            </div>
          </div>
        </template>

        <!-- 其他类型的详情 -->
        <template v-if="poi.type === 'entrance'">
          <div class="info-section">
            <h4>通行数据</h4>
            <div class="data-grid">
              <div class="data-item">
                <span class="label">今日进入人数</span>
                <span class="value">{{ poi.todayEntries }}人</span>
              </div>
              <div class="data-item">
                <span class="label">当前排队人数</span>
                <span class="value">{{ poi.currentQueue }}人</span>
              </div>
              <div class="data-item">
                <span class="label">闸机数量</span>
                <span class="value">{{ poi.gateCount }}台</span>
              </div>
            </div>
          </div>
          
          <div class="info-section">
            <h4>票种信息</h4>
            <div class="facilities">
              <span v-for="ticket in poi.ticketTypes" :key="ticket" class="facility-tag">
                {{ ticket }}
              </span>
            </div>
          </div>
        </template>

        <template v-if="poi.type === 'hotel'">
          <div class="info-section">
            <h4>住宿信息</h4>
            <div class="data-grid">
              <div class="data-item">
                <span class="label">总房间数</span>
                <span class="value">{{ poi.roomCount }}间</span>
              </div>
              <div class="data-item">
                <span class="label">入住率</span>
                <span class="value">{{ poi.occupancyRate }}%</span>
              </div>
              <div class="data-item">
                <span class="label">酒店星级</span>
                <span class="value">{{ poi.starLevel }}星</span>
              </div>
            </div>
          </div>
          
          <div class="info-section">
            <h4>配套设施</h4>
            <div class="facilities">
              <span v-for="amenity in poi.amenities" :key="amenity" class="facility-tag">
                {{ amenity }}
              </span>
            </div>
          </div>
        </template>

        <template v-if="poi.type === 'restaurant'">
          <div class="info-section">
            <h4>餐厅信息</h4>
            <div class="data-grid">
              <div class="data-item">
                <span class="label">菜系类型</span>
                <span class="value">{{ poi.cuisine }}</span>
              </div>
              <div class="data-item">
                <span class="label">容纳人数</span>
                <span class="value">{{ poi.capacity }}人</span>
              </div>
              <div class="data-item">
                <span class="label">当前就餐人数</span>
                <span class="value">{{ poi.currentOccupancy }}人</span>
              </div>
            </div>
          </div>
          
          <div class="info-section">
            <h4>招牌菜品</h4>
            <div class="facilities">
              <span v-for="specialty in poi.specialties" :key="specialty" class="facility-tag">
                {{ specialty }}
              </span>
            </div>
          </div>
        </template>

        <!-- 操作按钮 -->
        <div class="action-buttons">
          <button class="action-btn primary" v-if="poi.type === 'monitor'" @click="playVideo">
            <svg viewBox="0 0 24 24">
              <path d="M8,5.14V19.14L19,12.14L8,5.14Z" fill="currentColor"/>
            </svg>
            播放监控
          </button>
          <button class="action-btn" @click="viewOnMap">
            <svg viewBox="0 0 24 24">
              <path d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22S19,14.25 19,9A7,7 0 0,0 12,2Z" fill="currentColor"/>
            </svg>
            在地图上查看
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  poi: {
    type: Object,
    required: true
  },
  activeType: {
    type: String,
    required: true
  }
})

const emit = defineEmits(['close'])

const getTypeText = (type) => {
  const typeMap = {
    scenic: '景区景点',
    monitor: '视频监控',
    entrance: '出入口',
    hotel: '住宿',
    restaurant: '餐饮',
    service: '公共服务',
    business: '商业'
  }
  return typeMap[type] || '未知类型'
}

const playVideo = () => {
  // 这里可以实现视频播放逻辑
  console.log('播放监控视频:', props.poi.name)
  // 可以打开视频播放器模态框
}

const viewOnMap = () => {
  // 关闭弹窗并聚焦到地图上的标记
  emit('close')
  console.log('在地图上查看:', props.poi.name)
}
</script>

<style scoped>
.detail-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  backdrop-filter: blur(5px);
  animation: overlayFadeIn 0.3s ease-out;
}

.detail-popup {
  background: rgba(13, 27, 42, 0.95);
  border: 1px solid rgba(0, 255, 136, 0.3);
  border-radius: 16px;
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  overflow: hidden;
  backdrop-filter: blur(20px);
  animation: popupSlideIn 0.3s ease-out;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  background: rgba(0, 255, 136, 0.1);
  border-bottom: 1px solid rgba(0, 255, 136, 0.2);
}

.header-left {
  flex: 1;
}

.poi-name {
  font-size: 1.3rem;
  font-weight: 600;
  color: #00ff88;
  margin: 0 0 0.3rem 0;
  text-shadow: 0 0 15px rgba(0, 255, 136, 0.5);
}

.poi-type {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
}

.close-btn {
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
}

.close-btn svg {
  width: 16px;
  height: 16px;
}

.popup-content {
  padding: 1.5rem;
  max-height: calc(80vh - 100px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 255, 136, 0.3) transparent;
}

.popup-content::-webkit-scrollbar {
  width: 4px;
}

.popup-content::-webkit-scrollbar-track {
  background: transparent;
}

.popup-content::-webkit-scrollbar-thumb {
  background: rgba(0, 255, 136, 0.3);
  border-radius: 2px;
}

.info-section {
  margin-bottom: 1.5rem;
}

.info-section h4 {
  font-size: 1rem;
  font-weight: 600;
  color: #00ff88;
  margin: 0 0 0.8rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.info-section h4::before {
  content: '';
  width: 3px;
  height: 1rem;
  background: linear-gradient(180deg, #00ff88, #00bcd4);
  border-radius: 2px;
}

.data-grid {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.data-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem;
  background: rgba(0, 255, 136, 0.05);
  border: 1px solid rgba(0, 255, 136, 0.1);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.data-item:hover {
  background: rgba(0, 255, 136, 0.1);
  border-color: rgba(0, 255, 136, 0.2);
}

.data-item .label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
}

.data-item .value {
  color: #ffffff;
  font-weight: 600;
  font-size: 0.9rem;
}

.description {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  margin: 0;
  font-size: 0.9rem;
}

.facilities {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.facility-tag {
  padding: 0.4rem 0.8rem;
  background: rgba(0, 255, 136, 0.15);
  border: 1px solid rgba(0, 255, 136, 0.3);
  border-radius: 6px;
  color: #00ff88;
  font-size: 0.8rem;
  font-weight: 500;
}

.video-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: rgba(0, 0, 0, 0.3);
  border: 2px dashed rgba(0, 255, 136, 0.3);
  border-radius: 12px;
  text-align: center;
}

.video-icon {
  width: 48px;
  height: 48px;
  background: rgba(0, 255, 136, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00ff88;
  margin-bottom: 1rem;
}

.video-icon svg {
  width: 24px;
  height: 24px;
}

.video-placeholder p {
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 1rem 0;
  font-size: 0.9rem;
}

.play-btn {
  padding: 0.6rem 1.2rem;
  background: rgba(0, 255, 136, 0.2);
  border: 1px solid #00ff88;
  border-radius: 8px;
  color: #00ff88;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

.play-btn:hover {
  background: rgba(0, 255, 136, 0.3);
  transform: translateY(-1px);
}

.action-buttons {
  display: flex;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0, 255, 136, 0.2);
}

.action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem;
  background: rgba(0, 255, 136, 0.1);
  border: 1px solid rgba(0, 255, 136, 0.3);
  border-radius: 8px;
  color: #00ff88;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

.action-btn:hover {
  background: rgba(0, 255, 136, 0.2);
  transform: translateY(-1px);
}

.action-btn.primary {
  background: rgba(0, 255, 136, 0.2);
  border-color: #00ff88;
}

.action-btn.primary:hover {
  background: rgba(0, 255, 136, 0.3);
}

.action-btn svg {
  width: 16px;
  height: 16px;
}

/* 动画效果 */
@keyframes overlayFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes popupSlideIn {
  from {
    opacity: 0;
    transform: translateY(-50px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 响应式设计 */
@media screen and (max-width: 600px) {
  .detail-popup {
    width: 95%;
    max-height: 90vh;
  }
  
  .popup-header {
    padding: 1rem;
  }
  
  .poi-name {
    font-size: 1.1rem;
  }
  
  .popup-content {
    padding: 1rem;
  }
  
  .action-buttons {
    flex-direction: column;
  }
}
</style> 